<template>
  <div class="main">
    <div class="py-container">
      <TypeNav />
      <BreadCrumb
        :getSearchData="getSearchData"
        :searchParams="searchParams"
        @delTrademark="delTrademark"
        @delProps="delProps"
      />
      <Selector @trademarkInfo="trademarkInfo" @attrInfo="attrInfo" />
      <GoodsList
        :searchParams="searchParams"
        @changeOrder="changeOrder"
        @changPageNum="changPageNum"
      />
      <HotSale />
    </div>
  </div>
</template>

<script>
import BreadCrumb from "./BreadCrumb";
import GoodsList from "./GoodsList";
import HotSale from "./HotSale";
import Selector from "./Selector";

export default {
  name: "Search",
  components: { BreadCrumb, GoodsList, HotSale, Selector },
  data() {
    return {
      //搜索页面传服务器各项参数
      searchParams: {
        categoryId: undefined,
        categoryName: undefined, //设置undefined 发请求不带 节约宽带
        keyword: undefined,
        order: "1:desc",
        pageNo: 1,
        pageSize: 10,
        props: [],
        trademark: undefined,
      },
    };
  },
  mounted() {
    this.getSearchData();
  },
  methods: {
    //获取搜索数据方法
    getSearchData() {
      //重新配置datasearchParams的数据
      Object.assign(this.searchParams, this.$route.params, this.$route.query);
      return this.$store.dispatch("search/getSearchData", this.searchParams); //seach仓库发请求
    },
    //获取子组件selectar传递的trademark品牌请求数据
    trademarkInfo(value) {
      this.searchParams.trademark = value;
      this.getSearchData(); //重新发请求
    },
    //获取子组件selectar传递的attr属性请求数据
    attrInfo(attr, attrValue) {
      const props = `${attr.attrId}:${attrValue}:${attr.attrName}`;
      if (this.searchParams.props.indexOf(props) == -1) {
        this.searchParams.props.push(props);
        this.getSearchData(); //重新发请求
      }
    },
    //删除面包屑处理事件
    //1.删除Trademark面包屑数据
    delTrademark() {
      this.searchParams.trademark = undefined;
      this.getSearchData(); //重新发请求
    },
    //2.删除Prop面包屑index下标数据
    delProps(index) {
      this.searchParams.props.splice(index, 1); //从props数组中删除index下标
      this.getSearchData(); //重新发请求
    },
    //修改排序导航栏的id
    changeOrder(navId) {
      if (this.searchParams.order.split(":")[1] == "desc") {
        this.searchParams.order = `${navId}:asc`;
      } else {
        this.searchParams.order = `${navId}:desc`;
      }
      this.getSearchData(); //重新发请求
    },
    //修改分页的当前页码pageNoid
    changPageNum(num) {
      this.searchParams.pageNo = num;
      this.getSearchData(); //重新发请求
    },
  },
  watch: {
    $route() {
      this.getSearchData();
    },
  },
};
</script>

<style scoped lang="less">
.main {
  margin: 10px 0;
  .py-container {
    width: 1200px;
    margin: 0 auto;
  }
}
</style>